body {
  min-width: 320px;
  width: 10rem;

  /* 让body居中 */
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #f2f2f2;

  /* 只考虑移动端，屏幕宽度超过750时，页面宽度最大为750 */
  max-width: 750px;
}

a {
  text-decoration: none;
  font-size: 0.333333rem;
}

input {
  font-size: 0.333333rem;
}

@media screen and (min-width: 750px) {
  html {
    font-size: 75px !important;
  }
}

.header {
  position: fixed;
  /* 定位元素必须要设置宽度 */
  width: 10rem;

  /* 让定位元素水平居中 */
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  height: 1.173333rem;
  background-color: #ffc001;

  display: flex;
}

.header .categories {
  /* display: block; */
  width: 0.586667rem;
  height: 0.933333rem;

  margin: 0.146667rem 0.333333rem 0.133333rem;

  background: url(../images/classify.png) no-repeat;
  background-size: 0.586667rem 0.933333rem;
}

.header .search-box {
  flex: 1;
  /* padding-top: 10px; */
  line-height: 1;
}

.header .search-box input {
  width: 100%;
  height: 0.88rem;

  padding-left: 0.533333rem;
  background-color: #fff2cc;
  color: #757575;

  outline: none;
  border: 0;
  border-radius: .44rem;

}

.header .login-btn {
  /* display: block; */
  /* 先确定宽高 */
  width: 1rem;
  height: 0.933333rem;
  /* 移动到合适的位置 */
  margin: 0.133333rem;
  /* 居中 */
  line-height: 0.933333rem;
  text-align: center;

  /* 明确文字大小与颜色 */
  font-size: 0.333333rem;
  color: #fff;
}

.banner {
  width: 10rem;
  height: 3.466667rem;
}

.banner img {
  width: 100%;
  height: 100%;
}

.adver {
  display: flex;
}

.adver a {
  flex: 1;
}

.adver a img {
  width: 100%;
}

.nav {
  display: flex;
  flex-wrap: wrap;
}

.nav a {
  /* flex: 1; */
  /* flex-basis: 2rem; */
  width: 2rem;
  /* margin: 0 auto; */

  display: flex;
  flex-direction: column;

  /* text-align: center; */
  /* justify-content: center; */
  /* 子项目水平居中 ，因为主轴为 y轴 */
  align-items: center;
}

.nav a img {
  width: 1.093333rem;
  /* margin: 0 auto; */
}

.promotion,
.recommanded,
.headline {
  display: flex;
  width: 9.333333rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
}

.promotion .hot,
.promotion .discounts,
.promotion .international,
.promotion .group {
  width: 4.65rem;
  height: 3.466667rem;
  /* 排列里面的内容 */
  display: flex;
  flex-direction: column;
}

.promotion .hot {
  background-color: #fff;
  margin-right: 1px;
  margin-bottom: 1px;
  border-radius: 10% 0 0 0;
}

.promotion .discounts {
  background-color: #fff;
  margin-bottom: 1px;
  border-radius: 0 10% 0 0;
}

.promotion .international {
  background-color: #fff;
  margin-right: 1px;
  border-radius: 0 0 0 10%;

}

.promotion .group {
  background-color: #fff;
  border-radius: 0 0 10% 0;
}

/* .promotion .hot {
  display: flex;
  flex-direction: column;
} */

.promotion .title-wrapper {
  height: .433333rem;
}

.promotion .title {
  font-size: .333333rem;
  font-weight: bold;
  margin: .24rem .32rem;
}

.promotion .desc {
  font-size: .333333rem;
  color: #999;
  margin: .04rem .32rem;
}

.promotion .content {
  display: flex;
  flex-direction: row;
}

.promotion .content .product {
  width: 2.266667rem;
}

.promotion .content .product a {
  display: flex;
  margin: 0 auto;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: block;
  margin: 0 auto;
  text-align: center;
}

.promotion .content .product .tag-price {
  margin: 0;
  padding: 0;
}

.promotion .content .product a img {
  width: 1.6rem;
  height: 1.6rem;
}


.recommanded {
  /* display: flex; */
  background-color: #fff;
  margin-top: 1px;
  margin-bottom: 1px;

}

.recommanded .title-wrapper {
  width: 2rem;
  height: 1.333333rem;
}

.recommanded .title-wrapper .title {
  font-size: .333333rem;
  font-weight: bold;
  margin: .24rem .32rem;
}

.recommanded .title-wrapper .sub-title {
  font-size: .2333rem;
  color: #999;
  margin: .04rem .32rem;
}

.recommanded .categories {
  flex: 1;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

.recommanded .categories .item {
  width: 1.3rem;

}

.recommanded .categories .item a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.recommanded .categories .item a img {
  width: 1.2rem;
}

.recommanded .categories .item a p {
  margin: 0;
  padding: 0;
  font-size: .23rem;
}



.headline {
  margin-bottom: .133333rem;
  /* background-color: #fff; */
  height: 1.2rem;
}

.headline .title-wrapper {

  padding-top: .266667rem;
  /* height: 1rem; */
  /* align-self: flex-start; */
  font-size: .333333rem;
  font-weight: bold;

  width: 2rem;
  background-color: #fff;
  border-radius: 0 0 0 .333333rem;
}

.headline .title-wrapper p {
  margin: 0;
  padding: 0;
  padding-left: .2rem;
}

.headline .news {
  flex: 1;
  padding-top: .133333rem;
  background-color: #fff;
  border-radius: 0 0 .333333rem 0;
}

.headline .news a {}

.headline .news a span:nth-child(1) {
  background-color: #fc0;
  border-radius: .133333rem;
  font-size: .213333rem;
  line-height: .2rem;
  height: .2rem;
  padding: .333333rem;
  color: #222;
  word-break: keep-all;
}